<template>
    <div id="Money">
        <div class="zctop">
            <div class="zctop_title">
                <p class="changebz">
                    <img src="../../assets/qiehuanbizhong.png" alt="">
                    <span>￥</span>
                </p>
                <h2>资产</h2>
            </div>
            <p class="allzichantext">总资产(￥)</p>
            <p class="allzichannum">{{allzichannum}}</p>
            <div class="zctopchangetab">
                <div class="saoma" @click="tosaoyisao">
                    <img src="../../assets/saoyisao.png" alt="">
                    <p>扫一扫</p>
                </div>
                <div class="zhuanbi" @click="tozhuanbi">
                    <img src="../../assets/zhuanbi.png" alt="">
                    <p>转币</p>
                </div>
                <div class="chongbi" @click="toshoubi">
                    <img src="../../assets/chongbi.png" alt="">
                    <p>充币</p>
                </div>
            </div>
        </div>
        <div class="bizhonglist">
            <ul class="bizhongitemtitle">
                <li  v-for="(item,index) in bizhonglist" :key="index" @click="changebizhongitem(index)" :class="item.isshow?'bizhongitemtitleli active':'bizhongitemtitleli'">
                    {{item.symbol_name}}
                </li>
            </ul>
            <div class="bizhongitemdetail" v-show="isshow">
                <div class="bzitemdetailtitle">
                    <div class="left">
                        <img src="../../assets/BTC.png" alt="">
                        <span>{{symbol_name}}</span>
                    </div>
                    <div class="right">
                        <p>danjingtoken</p>
                        <p>
                            <span>单价≈</span>
                            <span>{{exchangeRate}}</span>
                            <span>{{symbolIcon}}</span>
                        </p>
                    </div>
                </div>
                <ul>
                    <li>
                        <span>总资产</span>
                        <span>{{totalAssets}}</span>
                    </li>
                    <li>
                        <span>可用资产</span>
                        <span>{{availableAssets}}</span>
                    </li>
                    <li>
                        <span>冻结资产</span>
                        <span>{{lockAssets}}</span>
                    </li>
                    <li>
                        <span>总价值</span>
                        <span class="strong">≈{{totalMoney}}￥</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="liushui">
            <div class="liushuititle">
                <div class="chu">转出流水</div>
                <div class="ru">
                    <router-link to="/zhuanruliushui">转入流水</router-link>
                </div>
            </div>
            <ul class="liushuilist">
                <li v-for="(item,index) in 6" :key="index">
                    <span>{{createTime}}</span>
                    <span>出</span>
                    <span>_{{amount}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import Vue from "vue";
    import Router from "vue-router";
    Vue.use(Router);
    export default {
        name: 'money',
        data() {
            return {
                allzichannum:"66666.66",
                totalAssets:"66666.66",
                availableAssets:"21382133.48",
                lockAssets:"21382133.48",
                totalMoney:"2394234.32",
                isshow:true,
                symbol_name:"BTC",
                exchangeRate:"0.33",
                symbolIcon:"￥",
                bizhonglist:[
                    {
                        symbol_name:"BTC",
                        isshow:true,
                        exchangeRate:"0.33"
                    },
                    {
                        symbol_name:"DJ",
                        isshow:false,
                        exchangeRate:"0.33"
                    },
                    {
                        symbol_name:"MUT",
                        isshow:false,
                        exchangeRate:"0.33"
                    },
                    {
                        symbol_name:"QY",
                        isshow:false,
                        exchangeRate:"0.33"
                    }
                ],
                createTime:"2019.02.01",
                amount:"2830.7231"
            }
        },
        methods: {
            changebizhongitem(x) {
                for (var i = 0; i < this.bizhonglist.length; i++){
                    if (i == x) { this.bizhonglist[i].isshow = true;this.symbol_name = this.bizhonglist[i].symbol_name } else {
                        this.bizhonglist[i].isshow = false;
                    }
                }
            },
            tosaoyisao() {
                this.$router.push({ path:'/saoyisao' });
            },
            tozhuanbi() {
                this.$router.push({ path:'/zhuanbi' });
            },
            toshoubi() {
                this.$router.push({ path:'/shoubi' });
            }
        }
    }
</script>

<style scoped lang="stylus">
@import '../../common/styl/mixin'
    #Money
        margin  0
        width  rem(375)
        min-height  100vh
        background  #FFFFFF
        overflow auto
        .zctop
            width  rem(375)
            height  rem(258)
            display  flex
            flex-direction  column
            justify-content  flex-start
            align-items  center
            background url("../../assets/zichanbg.png") no-repeat
            background-size 100% 100%
        .zctop_title
            position  relative
            font-size  rem(18)
            color  #FFFFFF
            font-family  HiraginoSansGB-W6
            font-weight  W6
            width  100%
            height  rem(18)
            line-height  rem(18)
            margin-top rem(32)
            display flex
            justify-content  center
            align-items  center
            .changebz
                position  absolute
                left rem(22)
                top  rem(3)
                color #FFFFFF
                font-size rem(13)
                height rem(13)
                width rem(29)
                display flex
                justify-content  space-between
                align-items  center
                img
                    width rem(16)
                span
                    font-size rem(13)
                    width rem(9)
                    height rem(10)
                    line-height rem(10)
                    font-family HiraginoSansGB-W3
                    font-weight W3
        .allzichantext
           color #FFFFFF
           font-size rem(15)
           font-family HiraginoSansGB-W3
           font-weight W3
           margin-top rem(40)
        .allzichannum
           color #FFFFFF
           font-size rem(24)
           font-family PingFangSC-Medium
           font-weight Medium
           margin-top rem(15)
           height rem(19)
           line-height rem(19)
        .zctopchangetab
            display flex
            justify-content space-between
            align-items center
            width rem(279)
            margin-top rem(44)
            color #FFFFFF
            font-size rem(13)
            font-family HiraginoSansGB-W3
            font-weight W3
            .zhuanbi,.saoma,.chongbi
                display flex
                justify-content space-between
                align-items center
                flex-direction column
                img
                    width rem(29)
                    height rem(30)
                p
                    margin-top rem(13)
        .bizhonglist
            width 100%
            .bizhongitemtitle
                display flex
                justify-content space-around
                align-items center
                height rem(56)
                li.bizhongitemtitleli
                    width 25%
                    height rem(56)
                    line-height rem(56)
                    text-align center
                    color #999999
                    font-family HiraginoSansGB-W3
                    font-size rem(15)
                    font-weight W3
                li.active
                    height rem(55)
                    border-bottom rem(1) #5E80E1 solid
                    color #666666
                    font-family HiraginoSansGB-W6
                    font-size rem(15)
                    font-weight W6
            .bizhongitemdetail
                width 100%
                height rem(225)
                background #FAFAFA
                .bzitemdetailtitle
                    height rem(61)
                    width rem(351)
                    display flex
                    margin rem(20) rem(12) 0
                    justify-content space-between
                    align-items center
                    .left
                        width rem(100)
                        display flex
                        justify-content center
                        align-items center
                        img
                            width rem(40)
                        span
                            color #666666
                            font-family HiraginoSansGB-W3
                            font-size rem(15)
                            font-weight W3
                            margin-left rem(14)
                    .right
                        color #666666
                        font-family HiraginoSansGB-W3
                        font-size rem(13)
                        font-weight W3
                        display flex
                        flex-direction column
                        justify-content flex-end
                        align-items flex-end
                        p:first-child
                            margin-bottom rem(15)
                ul
                    list-style none
                    margin rem(32) rem(12) 0
                    li
                        list-style none
                        display flex
                        justify-content space-between
                        align-items center
                        margin-bottom rem(20)
                        color #666666
                        font-family HiraginoSansGB-W3
                        font-size rem(13)
                        font-weight W3
                        .strong
                            color #333333
                            font-family HiraginoSansGB-W6
                            font-weight W6
                            font-size rem(14)
        .liushui
            width 100%
            .liushuititle
                width 100%
                height rem(40)
                display flex
                .ru
                    width 50%
                    box-sizing border-box
                    border solid rem(1) #2D4E7B
                    text-align center
                    height rem(40)
                    line-height rem(40)
                    color #2D4E7B
                    font-family HiraginoSansGB-W3
                    font-weight W3
                    font-size rem(15)
                .chu
                    width 50%
                    box-sizing border-box
                    text-align center
                    height rem(40)
                    line-height rem(40)
                    color #ffffff
                    font-family HiraginoSansGB-W3
                    font-weight W3
                    font-size rem(15)
                    background #7BA6D1
            .liushuilist
                width rem(351)
                margin rem(24) rem(12) 0
                li
                    display flex
                    justify-content space-between
                    align-items center
                    margin-bottom rem(23)
                    color #666666
                    font-family HiraginoSansGB-W3
                    font-size rem(13)
                    font-weight W3
</style>
